<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
	<script src="/js/vue.js"></script>
	<script src="/js/axios.min.js"></script>
</head>
<body>
	<div style="position: absolute; top: 0px; left: 0px; width: 60%;">
		<img src="image/IMG_7114.JPG" style="width: 100%; height: 90%; position: relative; top: 50px;">
	</div>
	<div id="top" style="height: 50px; background-color: #3C3C3C; width: 100%;">
		<div style="position: absolute; top: 5px; left: 0px; font-size: 30px; font-weight: 400; color: white; font-family: 'times new roman'">CRM &nbsp;<span style="font-size: 12px;">&copy;2019&nbsp;动力节点</span></div>
	</div>
	
	<div id="app" style="position: absolute; top: 120px; right: 100px;width:450px;height:400px;border:1px solid #D5D5D5">
		<div style="position: absolute; top: 0px; right: 60px;">
			<div class="page-header">
				<h1>登录</h1>
			</div>
			<form  class="form-horizontal" role="form">
				<div class="form-group form-group-lg">
					<div style="width: 350px;">
						<input class="form-control" v-model="user.act" type="text" placeholder="用户名">
					</div>
					<div style="width: 350px; position: relative;top: 20px;">
						<input class="form-control" v-model="user.psw" type="password" placeholder="密码">
					</div>
					<div style="width: 350px; position: relative;top: 20px;">
						<img src="/user/code" alt="" onclick="this.src=this.src+'?'">
						<input class="form-control" v-model="user.code"  placeholder="验证码">
					</div>
					<div class="checkbox"  style="position: relative;top: 30px; left: 10px;">
						<label>
							<input type="checkbox"> 十天内免登录
						</label>
						&nbsp;&nbsp;
						<span id="msg" style="color: red" v-text="msg"></span>
					</div>
					<button type="button" @click="login" class="btn btn-primary btn-lg btn-block"  style="width: 350px; position: relative;top: 45px;">登录</button>
				</div>
			</form>
		</div>
	</div>
<script>
	new Vue({
		el:"#app",
		data:{
			user:{
				act:undefined,
				psw:undefined,
				code:undefined
			},
			msg:undefined

		},
		methods:{
			login(){
				axios.post(`/user/login?act=${this.user.act}&psw=${this.user.psw}&code=${this.user.code}`)
				.then(resp=>{
					let data=resp.data;
					if (data.code==200){//登录成功
						//JSON.stringify 将js对象变成json字符串
						// localStorage.setItem() 在浏览器中永久存储
						//会话存储
						sessionStorage.setItem("user",JSON.stringify(data.result))
						 location.href="/workbench/index.html"
					}else{
						this.msg=data.msg
					}
				})
			}
		}
	})
</script>
</body>
</html>